<template>
  <view class="phxx-item">
    <view class="phxx-item-content">
      <view class="top">
        <view class="cname-box">
          <view class="cname">{{ itemList.carBrand || '-' }}</view>
          <view class="cname-fu-box">
            <view class="cname-fu">
              <u-tag :text="'皮重：'+itemList.netWeight" type="warning"></u-tag>
            </view>
            <view class="cname-fu">
              <u-tag :text="itemList.proName" plain></u-tag>
            </view>
          </view>
        </view>
      </view>
      <view class="bottom" style="margin-top: 20rpx">
        <view class="items">
          <text class="til">客户名称</text>
          <text class="val">{{ itemList.cusName || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">设备名称</text>
          <text class="val">{{ itemList.deviceName || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">扫码时间</text>
          <text class="val">{{ itemList.scanTime || '' }}</text>
        </view>
      </view>
      <view class="bottom">
        <view class="items">
          <text class="til">建议毛重</text>
          <text class="val">{{(itemList.advGrossWeight || '-') 吨}}</text>
        </view>
      </view>
      <view class="button-wrapper">
        <view class="bottom-btn">
          <button class="cancelBtn small" @click.stop="goLoadings(itemList.id)">确认装车</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getDateFormat } from '@/utils/common.js';
  import { confirmLoaded } from '@/api/tranplan.js';
  export default {
    name: 'loading-waybill',
    props: {
      itemList: {
        type: Object,
        default: {}
      },
    },
    computed: {
    },
    data() {
      return {
      };
    },
    methods: {
      async goLoadings(id) {
        const queryData = {
          loadingId: id,
          userId: getDriverId()
        }
        const datas = await confirmLoaded(queryData)
        if (datas.code === 0) {
          this.$emit('confirmFinish');
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .top .status {
    min-width: 58px;
    margin-left: 10px;
  }

  .button-wrapper {
    display: flex;
    justify-content: flex-end;
  }

  .bottom-btn {
    text-align: right;
    border-top: 1px solid #e8e7e7;
    padding-top: 10px;
    margin-left: 10px;
    width: 100%;

    button {
      margin-left: 10rpx;
    }
  }

  .weight-row {
    display: flex;
    border-radius: 4px;
    margin: 10px 0;
    background: #f1f2f5;

    >view {
      flex: 1;
      height: 40px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      >view {
        font-size: 12px;
        color: #999999;
      }

      >text {
        margin-top: 2px;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }

  .price-row {
    display: flex;
    margin-bottom: 10px;

    >view {
      flex: 1;
      height: 46px;
      display: flex;
      align-items: center;
      background: #f1f2f5;
      flex-direction: column;
      justify-content: center;

      >view {
        font-size: 12px;
        color: #999999;
      }

      >text {
        margin-top: 4px;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }
</style>